<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no" media="(device-height: 568px)">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="HandheldFriendly" content="True">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title></title>
    <link rel="stylesheet" type="text/css" media="all" href="../css/reset.css" />
    <link rel="stylesheet" type="text/css" media="all" href="../css/swiper.min.css" />
    <link rel="stylesheet" type="text/css" media="all" href="../css/style.css" />

    <script type="text/javascript" src="../js/common/jquery-2.1.1.min.js"></script>
    <script src="../js/common/swiper.jquery.js" type="text/javascript"></script>
    <script type="text/javascript" src="../js/common/jquery.SuperSlide.2.1.1.js"></script>
    <script src="../js/common/js.js" type="text/javascript"></script>
    <script src="../js/share_personalDetail.js" type="text/javascript"></script>
</head>
<style type="text/css">
    .ringlist .rilipic {
        width: 2.3rem;
        height: 2.3rem;
    }

    .ringlist .ringlilist>a:nth-of-type(3n) .rilipic {
        margin-right: 0;
    }

    .bannerfl {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        opacity: 0;
    }

    .plusBannerSwiper {
        width: 100%;
        overflow: inherit;
    }

    .plusBannerSwiper .swiper-pagination {
        bottom: -0.5rem;
        color: white;
    }
</style>

<body>
    <!-- 头部 -->
    <div class="header">
        <a href="fox://setBack" class="hele"></a>
        <h1 class="hetitle">个人详情</h1>
        <a href="javascript:;" class="helr share"><img class="shareIcon" src="../img/share.png" alt=""></a>
    </div>

    <div id="page" class="page m2">
        <!--首页头部-->
        <div class="inheder shdebanner" style="position: relative;">
            <form class="banner" method="post" enctype="multipart/frm-data">
                <div class="swiper-slide"><img src="../img/banner.png" alt="" class="baimg" id="headImg" /></div>
                <input type="file" class="bannerfl" onchange="showPic(this)" name="file" id="fileInput" />
            </form>
        </div>

        <!--店铺名称-->
        <div class="shopname">
            <div class="ringtop">
                <img src="../img/orimg.png" alt="" class="ringtpic" id="img_head">
                <div class="ringtco">
                    <p class="ringtct1" style="margin-top:.3rem;" id="nick_name">中国石材中心</p>
                </div>
            </div>
            <div class="shopnat">
                <p class="shopnati">
                    <span class="shopnatis" id="read_count">浏览量 0</span>
                </p>
                <p class="shopnati"></p>
                <p class="shopnati contactService">
                    <img src="../img/shopnapic2.png" alt="" class="shopnapic2" />
                    <a href="javascirpt:;" class="shopnatis contactBtn">联系客服</a>
                </p>
            </div>
        </div>

        <div class="shop_deta">
            <div class="shnav">
                <div class="shnavitem on" style="width:50%;">
                    <span class="shnavlink">联系</span>
                </div>
                <div class="shnavitem" style="width:50%;">
                    <span class="shnavlink">建材圈</span>
                </div>
            </div>

            <div class="sh_delsitd">

                <!--联系-->
                <div class="sh_delsit" style="display: block;">
                    <div class="shdetd">
                        <p class="shdetdt1">企业简介</p>
                        <p class="shdetdt2 hi" id="shdetdt2">......</p>
                        <a href="javascript:;" class="shdetdt3"><span class="shdetdt3link">更多</span><span class="shdetde3pic"></span></a>
                    </div>
                    <div class="shdetd">
                        <p class="shdetdt1">主营业务</p>
                        <p class="shdetdt2" id="main_business"></p>
                    </div>
                    <div class="shdetd">
                        <p class="shdetdt1">联系方式</p>
                        <a href="javascript:;" class="shdetdt2" id="phone"></a>
                    </div>
                    <div class="shdetd">
                        <p class="shdetdt1">详细地址</p>
                        <p class="shdetdt2" id="address"></p>
                    </div>
                </div>

                <!--建材圈-->
                <div class="sh_delsit ringlist">
                    <div id="ringlist"></div>
                </div>
            </div>
        </div>
        <p class="notMore">别拉了 - 疼</p>
    </div>

    <!-- 分享底部 -->
    <div class="downLoad">
        <ul class="dlLists"></ul>
        <p class="icp_info"></p>
        <p class="other_msg"></p>
    </div>

    <!-- 遮罩层 -->
    <div class="mask" style="background:black;"></div>
    <div class="dialog" id="d1" onclick="dialogClose()">
        <div class="dialog_wrap dialog_content">
            <img class="showImg" src="../img/user.jpg" alt="">
        </div>
    </div>

    <div class="dialog" id="plusBanner" onclick="dialogClose()">
        <div class="dialog_wrap dialog_content" style="background:transparent;">
            <div class="swiper-container plusBannerSwiper">
                <div class="swiper-wrapper"></div>
                <div class="swiper-pagination"></div>
            </div>
        </div>
    </div>

</body>
<script type="text/javascript">
    $(() => {
        // 图片放大轮播
        $(document).on('click', '.plusBanner', function() {
            let idx = $(this).parent().index();
            let img = $(this).attr('data-url');
            let arr = [];
            $('.showImg').attr('src', img);
            dialog('#plusBanner');
            for (var i = 0; i < $(this).parent().parent().find("img").length; i++) {
                arr.push($(this).parent().parent().find("img").eq(i).attr("data-url"));
            }
            let html = '';
            arr.forEach(item => {
                html += `
                    <div class="swiper-slide">
                        <img class="showImg" src="${item}" alt="">
                    </div>
                `;
            })
            $('.plusBannerSwiper .swiper-wrapper').html(html);
            // banner轮播
            let plusSwiper = new Swiper('.plusBannerSwiper', {
                // pagination: '.swiper-pagination',
                paginationType: 'fraction'
            })
            if (idx == 0) {
                $(".swiper-wrapper").css("transform", "translate3d(0px,0px,0px)")
            }
            plusSwiper.slideTo(idx, false);
        })

        //收藏
        $("#shopnati").click(function() {
            $(this).toggleClass("on")
        })

        //更多
        var shdeNun = 1;
        $(".shdetdt3").click(function() {
            if (shdeNun == 1) {
                $(this).addClass("on");
                $("#shdetdt2").addClass("on");
                var el = $("#shdetdt2"),
                    curHeight = el.height(),
                    autoHeight = el.css('max-height', 'initial').height();
                $(".shdetdt3link").html("收起");
                shdeNun = 2
                return false
            } else if (shdeNun == 2) {
                $(this).removeClass("on");
                $("#shdetdt2").removeClass("on");
                var el = $("#shdetdt2"),
                    curHeight = el.height(),
                    autoHeight = el.css('max-height', '.8rem').height();
                $(".shdetdt3link").html("更多");
                shdeNun = 1
                return false
            }
        })
    })
</script>

</html>